<template>
  <su-popup :show="_show" @close="_show = false">
    <view class="model-box">
      <view class="title-box">
        <view class="title">
          {{ title }}
        </view>
        <text class="close iconfont icon-a-ziyuan14" @tap.stop="_show = false" />
      </view>
      <view class="">
        <uni-search-bar
          v-model="wheres.smaterialcode.value"
          class="ss-flex-1 search-box"
          :radius="5"
          placeholder="搜索"
          cancel-button="none"
          @confirm="onSearch"
        />
      </view>
      <scroll-view
        class="model-content"
        scroll-y
        :scroll-with-animation="false" 
        :enable-back-to-top="true"
        refresher-enabled
        :refresher-triggered="triggered"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        @scrolltolower="loadmore"
      >
        <template v-if="!isEmpty(state.pagination.list)">
          <view v-for="item in state.pagination.list" :key="item.id" class="ss-m-b-20" @tap.stop="onClick(item)">
            <s-order-card :title="item.smaterialname">
              <template #status>
                <s-dict-tag type="mes_status" :value="item.smaterialcode" />
              </template>
              <view class="ss-flex ss-p-y-10">
                <view class="ui-TC-3 card-lable">名称：</view>
                <view class="ui-TC">{{ item.smaterialname }}</view>
              </view>
              <view class="ss-flex ss-p-y-10">
                <view class="ui-TC-3 card-lable">规格：</view>
                <view class="ui-TC">{{ item.sspecification }}</view>
              </view>
              <view class="ss-flex ss-p-y-10">
                <view class="ss-flex ss-flex-1">
                  <view class="ui-TC-3 card-lable">单位：</view>
                  <view class="ui-TC">{{ item.sunitcode }}</view>
                </view>
                <view class="ss-flex ss-flex-1">
                  <view class="ui-TC-3 card-lable">分类：</view>
                  <view class="ui-TC">{{ item.scategoryname }}</view>
                </view>
              </view>
              <view class="ss-flex ss-p-y-10">
                <view class="ss-flex ss-flex-1">
                  <view class="ui-TC-3 card-lable">保质期管理：</view>
                  <!-- <view class="ui-TC">{{ item.sshelflife }}</view> -->
                  <s-dict-tag type="common_boolean" :value="item.sshelflife" />
                </view>
                <view class="ss-flex ss-flex-1">
                  <view class="ui-TC-3 card-lable">批次管理：</view>
                  <!-- <view class="ui-TC">{{ item.sbatchmangager }}</view> -->
                  <s-dict-tag type="material_batchMangager" :value="item.sbatchmangager" />
                </view>
              </view>
            </s-order-card>
          </view>
        </template>
        <s-empty v-else text="暂无数据" />
        <!-- 加载更多 -->
        <uni-load-more
          v-if="state.pagination.total > 0"
          :status="state.loadStatus"
          :content-text="{
            contentdown: '上拉加载更多'
          }"
          @tap="loadmore"
        />
      </scroll-view>
    </view>
  </su-popup>
</template>

<script setup>
/**
 *
 * 标题栏
 *
 * @property {String} title 				- 标题
 * @property {String} subTitle 				- 副标题
 * @property {Number} height 				- 高度
 * @property {String} Type = [left | right | center | between]					- 样式
 *
 */
import { computed, onMounted, reactive, watch, ref } from 'vue'
import sheep from '@/sheep'
import { isEmpty, isArray, cloneDeep, concat, isNumber } from 'lodash-es'

// 接收参数
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: null
  },
  title: {
    type: String,
    default: '物料列表'
  },
  defaultValue: {
    type: [String, Object],
    default: null
  }
})

const emit = defineEmits(['update:modelValue', 'change'])
const _show = computed({
  get() {
    return props.modelValue
  },
  set(v) {
    emit('update:modelValue', v)
  }
})

// 数据
const state = reactive({
  loadStatus: '',
  keyword: '',
  currentTab: 0,
  tabList: [
    {
      name: '未审核',
      value: 'all'
    },
    {
      name: '已审核',
      value: 'all'
    },
    {
      name: '全部',
      value: 'all'
    }
  ],
  pagination: {
	  list: [],
	  page: 1,
	  total: 1,
	  pageSize: 15
  },
  fields:
[
 
]
})
const pagination = {
  list: [],
  page: 1,
  total: 1,
  pageSize: 6
}
const defaultWheres = {
  smaterialcode: {
    value: '',
    displaytype: '='
  }
}
const wheres = ref(cloneDeep(defaultWheres))
/** 查询列表 */
const getList = async(page = 1, pageSize = 15) => {
  state.loadStatus = 'loading'
  const httpData = {
    pageNo: state.pageNo,
    pageSize: state.pageSize,
    wheres: sheep.$helper.handleWheres(wheres.value),
    fields: state.fields
  }
  const res = await sheep.$api.common_material.getMaterialPage(httpData)
  if (res.code === 0 && res.data?.list) {
		 let concatList = concat(state.pagination.list, res.data.list)
		 state.pagination = {
		   page,
		   total: res.data.total,
		   pageSize: pageSize,
		   list: concatList
		 }
		 if (state.pagination.total > state.pagination.list.length) {
		   state.loadStatus = 'more'
		 } else {
		   state.loadStatus = 'noMore'
		 }
	 } else {
		  state.loadStatus = ''
	 }
}

const onSearch = () => {
  onPullDownRefresh()
}

// 加载更多
function loadmore() {
  if (state.loadStatus !== 'noMore') {
    getList(state.pagination.page + 1)
  }
}
let _freshing = false
const triggered = ref('false')
const onRefresh = async(e) => {
  if (_freshing) return
  _freshing = true
  await onPullDownRefresh()
  triggered.value = false
  _freshing = false
}
const onRestore = () => {
  triggered.value = 'restore' // 需要重置
  console.log('onRestore')
}
						
// 下拉刷新
const onPullDownRefresh = async() => {
  state.pagination = pagination
  await getList()
}
watch(() => _show.value, (val) => {
  if (val) {
		 getList()
  }
}, {
  immediate: true,
  deep: true
})

const onClick = (item) => {
  emit('change', cloneDeep(item))
  _show.value = false
}
</script>

<style lang="scss" scoped>
.model-box {
	height: 75vh;
}
.title-box {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	.title{
		width: 70%;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.close{
		position: absolute;
		right: 35rpx;
		font-size: 25rpx;
		top: 50%;
		transform: translateY(-50%);
		
	}
}
.model-content {
	height: calc(100% - 120rpx - 80rpx);
	box-sizing: border-box;
	background-color: var(--ui-BG-1);
	padding-bottom: 10px;
}
</style>
